<template>
  <component :is="tag">
    <a-menu :mode="menuMode" :theme="theme" :default-selected-keys="['/index']" @menu-item-click="onMenuClick" v-bind="menuProps">
      <template v-for="item of menuOptions" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <svg-icon style="font-size: 16px; margin-top: -2px" :name="item.icon" />
            </template>
            {{ item.label }}
          </a-menu-item>
        </template>
        <template v-else>
          <SubMenu :key="item.key" :menu-info="item" />
        </template>
      </template>
    </a-menu>
  </component>
</template>

<script lang="ts">
  import { computed, defineComponent, nextTick, onMounted, PropType, ref, shallowReactive, watch, watchEffect } from 'vue'
  import { RouteRecordRaw, useRoute } from 'vue-router'
  import useAppConfigStore from '@/store/modules/app-config'
  import { LayoutMode, SideTheme, ThemeMode } from '@/store/types'
  import { transfromMenu } from '@/store/help'
  import useVisitedRouteStore from '@/store/modules/visited-routes'

  export default defineComponent({
    name: 'RootMenu',
    props: {
      routes: {
        type: Array as PropType<Array<RouteRecordRaw>>,
        require: true,
        default: () => [],
      },
      mode: {
        type: String as PropType<'vertical' | 'pop' | 'horizontal' | 'popButton' | undefined>,
        default: 'vertical',
      },
      menuProps: {
        type: Object,
        default: () => ({}),
      },
    },
    emits: ['top-item-click'],
    setup(props) {
      const visitedRouteStore = useVisitedRouteStore()
      const appStore = useAppConfigStore()
      const menuOptions = shallowReactive<any[]>([])
      const defaultPath = ref<string[]>([])
      const defaultExpandKeys = ref<string[]>([])
      const menuMode = computed(() => props.mode)
      const currentRoute = useRoute()
      defaultPath.value.push(menuMode.value === 'vertical' ? currentRoute.fullPath : currentRoute.matched[0].path)
      const tag = ref(menuMode.value === 'vertical' ? 'Scrollbar' : 'div')
      const theme = computed(() => {
        if (appStore.theme === ThemeMode.DARK) {
          return 'dark'
        }
        if (appStore.layoutMode === LayoutMode.TTB) {
          return 'light'
        }
        return appStore.sideTheme === SideTheme.IMAGE ? 'dark' : appStore.sideTheme === SideTheme.WHITE ? 'light' : 'dark'
      })
      handleExpandPath()
      function handleMenu(routes?: Array<RouteRecordRaw>) {
        menuOptions.length = 0
        const tempMenus = transfromMenu(routes || [])
        menuOptions.push(...tempMenus)
      }
      function handleExpandPath() {
        const paths = currentRoute.fullPath.split('/')
        const resultPaths = paths
          .filter((it) => !!it)
          .reduce(
            (pre, cur) => {
              pre.push(pre.slice(pre.length - 1, pre.length) + '/' + cur)
              return pre
            },
            ['']
          )
        resultPaths.forEach((it) => {
          if (it && !defaultExpandKeys.value.includes(it)) {
            defaultExpandKeys.value.push(it)
          }
        })
      }
      function onMenuClick(key: string) {
        visitedRouteStore.rootMenu = key
        // if (menuMode.value === 'horizontal') {
        //   emit('top-item-click', key)
        //   return
        // }
        // if (isExternal(key)) {
        //   window.open(key)
        // } else {
        //   router.push(key)
        //   if (appStore.deviceType === 'mobile') {
        //     appStore.toggleCollapse(true)
        //   }
        // }
      }
      // watch(
      //   () => currentRoute.fullPath,
      //   (fullPath) => {
      //     nextTick(() => {
      //       const visitedRoute = visitedRouteStore.getVisitedRoutes.find((it: any) => it.fullPath === fullPath)
      //       if (visitedRoute) {
      //         const { originator } = visitedRoute.meta
      //         defaultPath.value.length = 0
      //         if (originator) {
      //           defaultPath.value.push(originator.rootMenu)
      //           return
      //         }
      //       }
      //       defaultPath.value.push(currentRoute.matched[0].path)
      //     })
      //   }
      // )
      watch(
        () => props.mode,
        (newVal) => {
          newVal === 'vertical' ? 'Scrollbar' : 'div'
        }
      )
      watchEffect(() => {
        handleMenu(props.routes)
      })
      onMounted(() => {
        nextTick(() => {
          const items = document.querySelectorAll('.arco-trigger-popup.arco-trigger-position-bl.arco-menu-pop-trigger')
          items.forEach((it) => {
            it.setAttribute('style', 'width: 150px')
          })
        })
      })
      return {
        appStore,
        tag,
        theme,
        menuMode,
        defaultPath,
        defaultExpandKeys,
        menuOptions,
        onMenuClick,
      }
    },
  })
</script>

<style lang="less" scoped>
  :deep(.arco-menu-collapsed) {
    margin: 0 auto;
  }

  // 选中样式 覆盖 begin
  :deep(
      .arco-menu-light.arco-menu-horizontal .arco-menu-item,
      .arco-menu-light.arco-menu-horizontal .arco-menu-group-title,
      .arco-menu-light.arco-menu-horizontal .arco-menu-pop-header,
      .arco-menu-light.arco-menu-horizontal .arco-menu-inline-header
    ) {
    &.arco-menu-selected {
      background: #165dff;
      border-radius: 0;
      color: #fff;
      &:hover {
        background: #5a8cff;
      }
    }
  }

  :deep(.arco-menu-item) {
    color: #1d2129 !important;
    & .arco-menu-icon {
      color: #1d2129 !important;
    }
    &.arco-menu-selected {
      color: #fff !important;
      & .arco-menu-icon {
        color: #fff !important;
      }
    }
  }
  // end

  :deep(
      .arco-menu-horizontal .arco-menu-item,
      .arco-menu-horizontal .arco-menu-group-title,
      .arco-menu-horizontal .arco-menu-pop-header,
      .arco-menu-horizontal .arco-menu-inline-header
    ) {
    line-height: 60px;
    color: #1d2129;
    .arco-menu-icon {
      margin-right: 0px;
    }
  }

  :deep(.arco-menu-item) {
    margin-left: 0 !important;
  }
  :deep(.arco-menu-title) {
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
  }

  .scrollbar {
    height: calc(100vh - @logoHeight) !important;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
</style>
